<template>
	<view class="container">
		<view class="content_bac">
			<text v-if="bindType">绑定账号确认</text>
			<text v-else>绑定经纪人确认</text>
			<view class="card">
				<view>
					<view style="font-weight: 600;">绑定经纪人信息:</view>
					<view class="textInfo">经纪人电话 {{brokerInfo.mobile}}</view>
					<view class="textInfo">经纪人昵称 {{brokerInfo.name}}</view>
				</view>
				<view style="display: flex;align-items: center;
    justify-content: space-around;">
					<view>
						<image src="/static/image/banding.png" mode="widthFix" style="width: 80rpx;
						margin: 10px;"></image>
					</view>
					<view style="font-size: 28rpx;">
						<text v-if="bindType">将绑定至账号</text>
						<text v-else>成为该经纪人的陪玩</text>
					</view>
				</view>
				<view style="display: flex;">
					<view>
						<image :src="userInfo.image" mode="widthFix" style="width: 130rpx;border-radius: 50%;"></image>
					</view>
					<view style="padding: 40rpx 10rpx;white-space: nowrap;">
						{{userInfo.nickname}}
					</view>
				</view>
			</view>
		</view>
		<view v-if="bindType" class="becomeBtn" @tap="bindBroker()">确认信息并绑定经纪人</view>
		<view v-else class="becomeBtn" @tap="playerBindBroker()">成为TA的陪玩</view>

		<view class="login_con_agreement" v-if="bindType">
			<view>
				<checkbox-group @change="checkAgree">
					<checkbox :checked="isAgree"></checkbox>
				</checkbox-group>
			</view>
			<view>已阅读并同意 <text @click="agreement(7)">天菜陪玩MCN入驻协议</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAgree:false,//经纪人同意绑定许可
				brokerInfo: {},
				userInfo: {},
				identity: {},
				brokerId: null,
				bindType: true //ture为用户绑定经纪人 false为陪玩绑定经纪人
			}
		},
		onLoad(opt) {
			this.brokerId = opt.id
			if (opt.bindType === "bindingBroker") {
				this.bindType = true
			} else {
				this.bindType = false
			}

			this.getBrokerInfo(opt.id)
			this.getUserInfo()
		},
		methods: {
			async playerBindBroker() {
				console.log("playerBindBroker")
				const data = await this.$http('/appapi/member/userbindingBroker', {
					id: this.brokerId
				})
				uni.showToast({
					title: data.msg,
					icon: 'none'
				})
			},
			agreement(type) {
				uni.navigateTo({
					url: '/pages/agreement/agreement?type=' + type
				})
			},
			//用户绑定经纪人
			async bindBroker() {
				if(!this.isAgree){
					uni.showToast({
						title:"请先阅读并同意协议",
						icon:"none"
					})
					
					return
				}else{
					console.log("可以正常提交")
				}
				
				
				const data = await this.$http('/appapi/member/bindingBroker', {
					id: this.brokerId
				})
				console.log(data)
				uni.showToast({
					title: data.msg,
					icon: 'none'
				})
			},
			async getUserInfo() {
				const data = await this.$http('/appapi/member/info');
				console.log("--------------getUserInfo--------------");
				console.log(data);
				this.userInfo = data
				this.identity = data.identity
				console.log(this.identity);
				console.log(this.userInfo)
			},

			async getBrokerInfo(id) {
				const data = await this.$http('/appapi/member/brokerInfo?id=' + id)
				console.log("经纪人信息")
				console.log(data.data)
				this.brokerInfo = data.data
			},
			checkAgree(e) {
				this.isAgree = !this.isAgree
				console.log(this.isAgree)
			},
		}
	}
</script>

<style lang="less" scoped>
	.login_con_agreement {
		font-size: 24rpx;
		color: #161616;
		margin-top: 46rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		text {
			color: #9e9d9c;
			margin: 0 10rpx;
		}
	}

	.container {
		background-color: #F8F8F8;
		min-height: 100vh;
	}

	.content_bac {
		border-left: 2px solid #4EFFCF;
		border-right: 2px solid #FF4E4E;
		background-color: black;
		color: #fff;
		padding: 70rpx 50rpx 0;
		height: 300rpx;
		position: relative;
	}

	.progressLine {
		width: 1px;
		height: 20rpx;
		background-color: #9a9a9a;
	}

	.textInfo {
		margin: 20rpx 0;
		font-size: 28rpx;
	}

	.card {
		top: 42%;
		position: absolute;
		background-color: #fff;
		width: 85%;
		border-radius: 25rpx;
		padding: 25rpx;
		left: 50%;
		transform: translateX(-50%);
		box-shadow: 5rpx 5rpx 15rpx #D6D6D6;
		color: #000;
	}

	.becomeBtn {
		background-color: #000000;
		color: #E8E8E8;
		text-align: center;
		padding: 20rpx;
		width: 60%;
		box-sizing: border-box;
		font-size: 32rpx;
		border-radius: 20rpx;
		border-left: 5rpx solid #4EFFCF;
		border-right: 5rpx solid #FF4E4E;
		white-space: nowrap;
		margin: 353rpx auto 30rpx;
	}
</style>